Интересные дизайнерские онлайн сервисы №11: эффекты CSS, анимация, фоны

Лето 2018 плавно подходит к своему завершению, а мы заметили, что за этот период так и не опубликовали ни одной подборки классных онлайн проектов. Прошлый юбилейный 10 выпуск мини обзоров был размещен достаточно давно и включал сразу 10 сайтов. Сегодня их будет чуть меньше, но хуже от этого статья не станет — поговорим о CSS скриптах, палитрах, логотипах и не только.

CSS Doodle

В CSS Doodle встречается интересный подход при создании фоновой картинки, которая формируется с помощью сетки DIVов и CSS стилей. Подключаемый скрипт позволяет выводить в ячейках разные фигуры и формы плюс управлять их видом, анимацией, цветами и др.

На основной странице веб-ресурса есть детальный алгоритм по использованию библиотеки + потрясающие примеры ее применения. Фишка настолько крутая, что захотелось даже внедрить ее в нашем блоге.

Flat UI Colors 2

Проект Flat UI Colors 2 содержит 14 приятных и эффективных цветовых палитр, 13 из которых представлены разными дизайнерами со всего мира. Это отличная демонстрация какими особенностями обладает визуальная стилистика UI интерфейсов в тех или иных странах.

Лучше всего эти палитры подойдут для плоских Flat решений. С момента старта сайта в 2013 году их скачали более 25млн раз. Понравилась также реализация архива: наличие звуковых эффектов, анимации и т.п.

Animista

В Animista собрано множество вариантов CSS анимации с возможностью их легкой настройки. Все методики разбиты на несколько категорий: базовые, текст, фон, привлечение внимания, появление/скрытие объектов. При переходе в рубрики увидите конкретные приемы, например, поворот, переворачивание, скольжение и др.

После выбора определенного пункта можно задать ряд настроек для него: сначала выбираете сторону/направление действия, а затем в форме слева по желанию меняете значения доступных параметров. На финальном шаге просто генерируете рабочий код.

66 Smart Words

66 Smart Words — интересный проект дизайнера Bachir Bachchar с Behance, в котором он представил 66 разных слов в виде логотипов. Автор комбинировал определенное высказывание с его непосредственным значением, например: в Hide (скрываться) одна из буквы спряталась за остальными, в Run изображен бегущий первый символ и т.п.

Данная работа не преследует какую-то определенную цель, а создавалась исключительно для развлечения. Однако вполне может послужить источником вдохновения новичкам. Не все реализации идеальны, но парочка точно заслуживают внимания. В некоторых случаях есть хорошие примеры негативного пространства, которое мы обсуждали в уроках для начинающих рисовать и логотипах.

Shotsnapp

Сервис Shotsnapp позволяет быстро создавать демонстрационные примеры мобильных интерфейсов в специальном онлайновом инструменте. В отличи от PSD шаблонов телефонов или бесплатных iPhone мокапов вам не нужно ничего скачивать и править в Фотошопе, все выполняется непосредственно в браузере: загружаете свою картинку, подбираете соответствующую марку телефона и устанавливаете другие опции.

На данный момент в бета версии есть iPhone SE, 8, X, а также Galaxy S8 и Pixel 2. Если авторы продолжат улучшать функциональность и добавлять актуальные девайсы, веб-ресурс станет весьма крутым.

BetterWebType

Пройдя по ссылке на BetterWebType, найдете бесплатный курс по веб-типографике для разработчиков и дизайнеров. На данный момент его прошли более 10тысяч человек, в том числе и сотрудники крупных компаний.

Каждый урок (всего 7штук) займет не больше 5-10минут вашего времени + в нем имеются линки на сопутствующие материалы для изучения. Отзывы весьма хорошие, к тому же не придется вообще ничего платить. Если вам интересна эта тема, советую подписаться на рассылку курса, тем более. что это бесплатно.

10 years, 100 logo design projects

Еще один необычный проект с Behance — 100 logo design projects. В нем представлены 100 наиболее популярных и профессиональных логотипов по мнению автора подборки. По каждому из них имеется небольшое описание — в какой нише он используется и почему заслуживает внимания. В отличии от заметки с трендами лого 2018 эти примеры собирались не один год поэтому содержат достаточно много интересных решений.

Итого получилось 7 достойных внимания работ. Они могут помочь реализовать ваши задумки и развивать профессиональные навыки. Мы уже начали собирать материалы для следующей подобной статьи, не заставим вас долго ждать.